<template>
  <div>

    <el-form :inline="true" :model="carDictType" class="demo-form-inline"  >
      <el-form-item label="字典名称">
        <el-input v-model="carDictType.dictName" placeholder="字典名称"></el-input>
      </el-form-item>
      <el-form-item label="字典类型">
        <el-input v-model="carDictType.dictType" placeholder="字典类型"></el-input>
      </el-form-item>
      <el-form-item label="字典状态">
        <el-select v-model="carDictType.status" placeholder="字典状态">
          <el-option label="正常" value="0"></el-option>
          <el-option label="停用" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
            v-model="carDictType.createTime1"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="date"
            placeholder="开始时间">
        </el-date-picker>-
        <el-date-picker
            v-model="carDictType.createTime2"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="date"
            placeholder="结束时间">
        </el-date-picker>
      </el-form-item><br>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="list">查询</el-button>
        <el-button type="primary" @click="cz">重置</el-button>
        <el-button  @click="add" type="success">新增</el-button>
        <el-button  @click="dc" type="success">导出</el-button>
        <el-upload
            class="upload-demo"
            action="http://localhost:8000/carservice/carDictType/upload"
            multiple
            :limit="3">
          <el-button type="primary">导入</el-button>
        </el-upload>
      </el-form-item>

    </el-form>

    <template>
      <el-table
          ref="multipleTable"
          :data="tableData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            fixed
            prop="dictId"
            label="字典编号"
            width="150">
        </el-table-column>
        <el-table-column
            prop="dictName"
            label="字典姓名"
            width="120">
        </el-table-column>
        <el-table-column
            prop="dictType"
            label="字典类型"
            width="200">
          <template slot-scope="scope">
            <el-button type="text" @click="datalist(scope.row.dictType)">{{scope.row.dictType}}</el-button>
          </template>
        </el-table-column>
        <el-table-column
            label="状态"
            width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.status==0">正常</span>
            <span v-if="scope.row.status==1">停用</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="remark"
            label="备注"
            width="120">
        </el-table-column>
        <el-table-column
            prop="createTime"
            label="创建时间"
            width="200">
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="200">
          <template slot-scope="scope">
            <el-button @click="bianji(scope.row)" type="info" >修改</el-button>
            <el-button @click="handleClick(scope.row.dictId)" type="danger">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
          @current-change="gatPage"
          :current-page="carDictType.pageNum"
          :page-size="3"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </template>

    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" >
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="字典名称" prop="dictName" :label-width="formLabelWidth">
          <el-input v-model="form.dictName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典类型" prop="dictType" :label-width="formLabelWidth">
          <el-input v-model="form.dictType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="form.status" placeholder="字典状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="tianjia('ruleForm')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改类型" :visible.sync="dialogFormVisibles">
      <el-form :model="forms">
        <el-form-item label="字典名称" :label-width="formLabelWidth">
          <el-input v-model="forms.dictName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="字典类型" :label-width="formLabelWidth">
          <el-input v-model="forms.dictType" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="forms.status" placeholder="字典状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="停用" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="forms.remark"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="update">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import cartypeService from "@/api/cartypeService";
export default {
  name: "CarDictTypeView",
  data() {
    return {
      tableData:[],
      carDictType:{
        pageNum:1,
      },
      total:0,
      forms:{},
      form:{},
      dialogFormVisibles:false,
      dialogFormVisible:false,
      formLabelWidth:'120px',
      rules: {
        dictName: [
          {required: true, message: '请输入字典名称', trigger: 'blur'},
        ],
        dictType: [
          {required: true, message: '请输入字典类型', trigger: 'blur'},
          {min: 5, max: 100, message: '最少需要5个字符', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    list(){
      cartypeService.list(this.carDictType).then((r)=>{
        this.tableData=r.data.data.list;
        this.total=r.data.data.total;
      })
    },
    gatPage(pageNum){
      this.carDictType.pageNum=pageNum;
      this.list();
    },
    cz(){
      this.carDictType={};
      this.list();
    },
    add(){
      this.dialogFormVisible=true;
    },
    tianjia(ruleForm){
      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          cartypeService.add(this.form).then(()=>{
            this.$message.success("添加成功");
            this.dialogFormVisible=false;
            this.list();
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    dc(){
      location.href="http://localhost:9033/carDictType/download"
    },
    bianji(row){
      this.dialogFormVisibles=true;
      this.forms=row;
    },
    handleClick(dictId){
      cartypeService.delete(dictId).then(()=>{
        this.$message.success("删除成功");
        this.list();
      })
    },
    update(){
      cartypeService.update(this.forms).then(()=>{
        this.$message.success("修改成功");
        this.dialogFormVisibles=false;
        this.list();
      })
    },
  datalist(dictType){
   window.location.href="http://localhost:8080/cardictdata?dictType="+dictType
}
  },
  created() {
    this.list();
  }
}
</script>

<style scoped>

</style>
